<template>
	<view class="flex-col section_2">
		<view class="flex-row group">
			<view class="group_6">
				<text class="font_5">￥</text>
				<text class="font_4">{{intNumber(info.amount)}}</text>
			</view>
			<view class="flex-col items-start space-x-27">
				<text class="font_3">满{{intNumber(info.enough)}}减{{intNumber(info.amount)}}优惠券</text>
				<view class="text_5">
					<text class="self-start font_1">发行数量：{{info.number}}张</text>
					<text class="self-start font_1" style="margin-left: 30rpx;">剩余数量：{{info.stock}}张</text>
				</view>
				<text class="font_1 text_5">有效期：{{showDate(info.usetimestart)}}-{{showDate(info.usetimeend)}}</text>
			</view>
		</view>
		<!-- 已结束--不再展示  v-if="false"-->
		<view class="flex-row justify-end items-center group_7" v-if="status === '1'">
			<view class="flex-row space-x-51">
				<view class="flex-row items-center space-x-9" @click="del">
					<image class="shrink-0 image_4" src="/static/car-del.png" />
					<text class="font_6">删除</text>
				</view>
				<view class="flex-row items-center space-x-9" @click="navTo('/pages/coupon/couponHandle',{id:info.id})">
					<image class="shrink-0 image_5" src="/static/car-edit.png" />
					<text class="font_6">编辑</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import {
	defineComponent,
	watchEffect,
	reactive,
	toRefs,
	computed
	// watch,
	// nextTick,
	// ref,
} from 'vue';
// import { onReachBottom,onLoad } from "@dcloudio/uni-app";
const couponItem = defineComponent({
	props: {
		info: {
			type: Object,
			default: () => ({})
		},
		status:{
			type: String,
			default: "1"
		}
	},
	setup(props: any, ctx: any) {
		const data: any = reactive({
			info: {},
			status:'1', 
		});
		watchEffect(() => {
			data.info = props.info;
			data.status = props.status;
		});
		const intNumber = (num) => {
			return parseInt(num);
		}
		const showDate = timestamp => {
			return uni.$tools.date('Y.m.d', timestamp);
		};
		const del =()=>{
			ctx.emit('del',{id:data.info.id});
		}

		return {
			...toRefs(data),
			showDate,
			intNumber,
			del,
		};
	}
});
export default couponItem;
</script>

<style lang="scss" scoped>
.section_2 {
	padding-top: 30rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	margin-bottom: 24rpx;
	.group {
		padding: 0 29rpx 35rpx;
		.group_6 {
			margin-top: 18rpx;
			height: 31rpx;
			width: 120rpx;
			word-break: break-all;
			.font_5 {
				font-size: 30rpx;
				font-family: PingFang;
				color: #ffa810;
			}
			.font_4 {
				font-size: 40rpx;
				font-family: PingFang;
				line-height: 48rpx;
				color: #ffa810;
			}
		}
		.space-x-27 {
			.font_3 {
				font-size: 32rpx;
				font-family: PingFang;
				color: #333333;
				margin-left: 27rpx;
			}
			.font_1 {
				font-size: 24rpx;
				font-family: PingFang;
				color: #999999;
			}
			.text_5 {
				margin-top: 19rpx;
				margin-left: 27rpx;
			}
		}
	}
	
	.group_7 {
		// margin-top: 35rpx;
		padding: 20rpx 14rpx 17rpx 25rpx;
		border-top: solid 2rpx #0000000f;
		.space-x-6 {
			& > view:not(:first-child),
			& > text:not(:first-child),
			& > image:not(:first-child) {
				margin-left: 6rpx;
			}
			.image_6 {
				width: 15rpx;
				height: 9rpx;
			}
		}
		.space-x-51 {
			& > view:not(:first-child),
			& > text:not(:first-child),
			& > image:not(:first-child) {
				margin-left: 51rpx;
			}
			.space-x-9 {
				& > view:not(:first-child),
				& > text:not(:first-child),
				& > image:not(:first-child) {
					margin-left: 9rpx;
				}
				.image_4 {
					width: 34rpx;
					height: 32rpx;
				}
				.font_6 {
					font-size: 24rpx;
					font-family: PingFang;
					color: #333333;
				}
				.image_5 {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
}
</style>
